<template is="msgItem1">
	<view class="content">
		
		<view class="share-bg">
			<img class="user-img" :src="userinfo.avatar">
			<view class="share-title">{{userinfo.username}}的拍照红包，快来抢吧</view>
			<view class="money"><view>"</view><view class="money-whole">{{hb.money}}元</view><view>"</view></view>
			<view class="share-code"><img :src="c_code"></view>
			<view class="share-word">长按识别小程序，拍照抢红包</view>
		</view>
		
		<button class="share-button" open-type="share"><img src="/static/fenxiang.png">发送给朋友</button>
		
		<view class="share-save" @click="baocun"><img src="/static/picture.png">保存分享图</view>
		<poster v-if="posterShow"></poster>
	</view>
</template>

<script>
	import poster from '../../components/zywPoster.vue';
	export default {
		components: {
			poster
		},
		data() {
			return {
				posterShow:false,
				userinfo:"",
				hbmoney:"",
				hb:"",
				id:"",
				token:"",
				
				c_code:""
			}
		},
		onShareAppMessage(res) {
			var _self = this
		    if (res.from === 'share') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '来拍吧',
		      path: '/pages/index/takephotos?id=' + _self.id,
			  // imageUrl:"/static/ceshi.jpg"
		    }
		  },
		onLoad(options) {
			var _self = this
			_self.id = options.id
			try {
				const value = uni.getStorageSync('userinfo');
				if (value) {
					_self.userinfo = value
					_self.token = value.token
				}
			} catch (e) {
				// error
			}
			uni.request({
			    url: _self.$url + '/api/lucky_money/luckyMoneyDetail', 
				method:"post",
			    data: {
			       id:_self.id
			    },
				header: {
					'token': _self.token 
				},
			    success: (res) => {
					_self.hb = res.data.result.data
					uni.setStorage({
					    key: 'hbsharedata',
					    data: {
							hbshare:_self.hb,
						},
					});
			    }
			});
			uni.request({
			    url: _self.$url + '/api/lucky_money/doMiniappQr', 
				method:"post",
			    data: {
			       id:_self.id
			    },
				header: {
					'token': _self.token 
				},
			    success: (res) => {
					_self.c_code = res.data.result
					uni.setStorage({
					    key: 'c_code',
					    data: {
							c_code:_self.c_code,
						},
					});
			    }
			});
		},
		methods: {
			baocun:function(){
				this.posterShow = true
			},
			
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
		font-size: 14px;
	}
	view{
		box-sizing: border-box;
	}
	.share-bg{
		background:url(../../static/sharebg.png) no-repeat;
		width: 80%;
		margin:0 auto;
		height: 900rpx;
		margin-top:40rpx;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.user-img{
			border-radius: 50%;
			width: 150rpx;
			height: 150rpx;
			margin-top:120rpx;
		}
		.share-title{
			width: 80%;
			background: #E33439;
			text-align: center;
			color:#FFE0AA;
			font-size: 12px;
			padding:10rpx 0 14rpx 0;
			margin-top:25rpx;
			border-radius: 25rpx;
		}
		.money{
			width: 80%;
			display: flex;
			flex-direction: center;
			color:#FFE0AA;
			font-size: 28px;
			margin-top:25rpx;
			text-align: center;
			.money-whole{
				width: 100%;
				text-align: center;
			}
		}
		.share-code{
			img{
				width: 200rpx;
				height: 200rpx;
				margin:40rpx 0;
				// border-radius: 50%;
			}
		}
		.share-word{
			color:#FFE0AA;
		}
	}
	.share-button{
		background: #F4313E;
		color:#fff;
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin:0 auto;
		font-size: 14px;
		padding:3px 0;
		border-radius: 5px;
		margin-bottom:25rpx;
		img{
			width: 35rpx;
			height: 35rpx;
			margin-right: 15rpx;
		}
	}
	.share-save{
		background: #FF6872;
		color:#fff;
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin:0 auto;
		padding:20rpx 0;
		border-radius: 5px;
		margin-bottom:25rpx;
		img{
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}
	
</style>
